<template>
  <view class="container">
    <!-- #ifdef MP-WEIXIN -->
    <view v-if="!token" class="force-login-wrap">
      <!-- <image class="logo-bg" :src="`${$VUE_APP_RESOURCES_URL}/images/logo_bg.png`" mode="aspectFill"></image> -->
	  <view class="logo-header">
		  <view class="logo-img"><image src="@/static/sc_shop_logo.png" rel="preload"  style="width: 100%;height: 100%;" /></view>
		  <view class="logo-name">上层百货+</view>
	  </view>
      <view class="force-login__content y-f">
        <!-- <open-data class="user-avatar" type="userAvatarUrl"></open-data> -->
		
        <!-- <open-data class="user-name" type="userNickName"></open-data> -->
		
        <!-- <view class="login-notice">为了提供更优质的服务，需要获取您的头像昵称</view> -->
        <button class="cu-btn author-btn" v-if="canIUseGetUserProfile" @tap="getUserInfoProfile">微信账号快捷登录</button>
        <button class="cu-btn author-btn" v-else @getuserinfo="getUserInfo" open-type="getUserInfo">授权并查看</button>
        <button class="cu-btn close-btn" @tap="back">暂不登录</button>
      </view>
    </view>
    <!-- #endif -->
    <!-- #ifndef MP-WEIXIN -->
    <view class="force-login-wrap">
      <!-- <image class="logo-bg" :src="`${$VUE_APP_RESOURCES_URL}/images/logo_bg.png`" mode="aspectFill"></image> -->
      <view class="force-login__content y-f">
        <view class="login-notice">为了提供更优质的服务，请先登录</view>
        <button class="cu-btn author-btn" @tap="toLogin">去登录</button>
      </view>
    </view>
    <!-- #endif -->
  </view>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
import { wxappAuth, getUser } from '@/api/user'
import dayjs from 'dayjs'
import cookie from '@/utils/store/cookie'
import { login, authorize } from '@/utils'

export default {
  data() {
    return {
      authorize: false,
      canIUseGetUserProfile: false,
    }
  },
  computed: {
    ...mapState(['isAuthorization', '$deviceType', 'token']),
  },
  onLoad() {
    console.log('wx.getUserProfile:'+wx.getUserProfile)
    if (wx.getUserProfile) {
      console.log(this)
      this.canIUseGetUserProfile = true
      console.log('this.canIUseGetUserProfile',this.canIUseGetUserProfile)
    }
    // // 先校验用户是否授权，如果没有授权，显示授权按钮
  },
  onHide() {
    this.updateAuthorizationPage(false)
    this.changeAuthorization(false)
  },
  onUnload() {
    this.updateAuthorizationPage(false)
    this.changeAuthorization(false)
  },
  methods: {
    ...mapActions(['changeAuthorization', 'setUserInfo']),
    ...mapMutations(['updateAuthorizationPage']),
    toLogin() {
      this.$yrouter.push({
        path: '/pages/user/Login/index',
        query: {},
      })
    },
    back() {
      this.$yrouter.switchTab({
        path: '/pages/home/index',
        query: {},
      })
    },
    getUserInfo(data) {
      console.log(data)
      console.log('getUserInfo')
      if (data.detail.errMsg == 'getUserInfo:fail auth deny') {
        uni.showToast({
          title: '取消授权',
          icon: 'none',
          duration: 2000,
        })
        return
      }
      uni.showLoading({
        title: '登录中',
      })
      login()
        .then(e => {
          uni.hideLoading()
          console.log('重定向')
          this.$yrouter.reLaunch({
            path: cookie.get('redirect').replace(/\ /g, ''),
          })
        })
        .catch(error => {
          uni.hideLoading()
          console.log(error)
          uni.showToast({
            title: error,
            icon: 'none',
            duration: 2000,
          })
        })
    },
    getUserInfoProfile(data) {
      console.log('getUserInfoProfile')
      wx.getUserProfile({
        lang: 'zh_CN',
        desc: '需要获取您的信息用来展示',
        success: res => {
          console.log(res)
          uni.showLoading({
            title: '登录中',
          })
          login(res)
            .then(e => {
              console.log('重定向')
              this.$yrouter.reLaunch({
                path: cookie.get('redirect').replace(/\ /g, ''),
              })
            })
            .catch(error => {
              console.log(error)
              uni.showToast({
                title: error,
                icon: 'none',
                duration: 2000,
              })
            })
        },
      })
    },
  },
  mounted() {
    if (wx.getUserProfile) {
      console.log(this)
      this.canIUseGetUserProfile = true
      console.log(this.canIUseGetUserProfile)
    }
  },
}
</script>

<style lang="less">
.container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
}

.logo-header{
	position: absolute;
	    width: 160rpx;
	    top: 10%;
	    left: 50%;
	    transform: translateX(-50%);
	    text-align: center;
	.logo-img{
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-bottom: 40rpx;
	}
	.logo-name{
		    font-size: 33rpx;
		    font-family: PingFang SC;
		    font-weight: bold;
		    color: #000;
	}
}

.force-login-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 11111;
  top: 0;
  position: relative;

  .logo-bg {
    width: 640rpx;
    height: 300rpx;
  }

  .force-login__content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .user-avatar {
      width: 160rpx;
      height: 160rpx;
      border-radius: 50%;
      overflow: hidden;
      margin-bottom: 40rpx;
    }
	
	.logo{
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-bottom: 40rpx;
	}

    .user-name {
      font-size: 35rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #000;
      margin-bottom: 30rpx;
    }

    .login-notice {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #000;
      line-height: 44rpx;
      width: 500rpx;
      text-align: center;
      margin-bottom: 80rpx;
    }

    .author-btn {
      width: 630rpx;
      height: 80rpx;
      background: linear-gradient(to right, #f35447 0%, #ff8e3c 100%);
      background: -moz-linear-gradient(to right, #f35447 0%, #ff8e3c 100%);
      // box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
      border-radius: 40rpx;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
    }

    .close-btn {
      width: 630rpx;
      height: 80rpx;
      margin-top: 30rpx;
      border-radius: 40rpx;
      border: 2rpx solid #eb3729;
      background: none;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #eb3729;
    }
  }
}
</style>
